<template>
  <div>
    <Modal
      width="300"
      v-model="del.modal"
      title="确认框"
      @on-ok="handleDelOk">
      <p>确认删除该记录？</p>
    </Modal>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item>用户列表</Breadcrumb-item>
    </Breadcrumb>
    <List :current="current" :columns="columns" :data="users.users.items"
          :total="users.users.total"
          @on-change="handlePageChange">
      <ListHeader>
        <ListOperations>
          <Button class="margin-right-sm" type="primary" @click="$router.push('/users/form')">新增用户</Button>
        </ListOperations>
        <ListSearch>
          <Form ref="formInline" inline>
            <Form-item prop="name">
              <Input type="text" placeholder="请输入名称" v-model="search.name" style="width: 230px;"
                     @on-enter="handleSearch"/>
            </Form-item>
            <Form-item>
              <Button type="primary" @click="handleSearch">查询</Button>
            </Form-item>
          </Form>
        </ListSearch>
      </ListHeader>
    </List>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Config from '@/config'
  import time from '@/utils/helpers/timeLite'
  import List, { ListHeader, ListOperations, ListSearch } from '@/components/List'
  import User from '@/service/app/user'

  export default {
    name: 'userList',
    components: {
      List,
      ListHeader,
      ListOperations,
      ListSearch
    },
    data () {
      let self = this
      return {
        del: {
          modal: false,
          id: 0
        },
        search: {
          type: null,
          name: ''
        },
        current: 1,
        columns: [
          {
            title: '用户名',
            key: 'username',
            width: 140
          },
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '手机号码',
            key: 'mobile',
            width: 120
          },
          {
            title: '启停',
            key: 'enabled',
            width: 80,
            render (h, params) {
              let text = params.row.enabled ? '已启用' : '已停用'
              let btnEnable = h('Button', {
                props: {
                  type: params.row.enabled ? 'ghost' : 'warning',
                  size: 'small'
                },
                on: {
                  click: () => {
                    self.handleEnable(params.row)
                  }
                }
              }, text)
              return h('div', [
                btnEnable
              ])
            }
          },
          {
            title: '类型',
            key: 'type',
            width: 86,
            render (h, params) {
              let text = User.adminToName(params.row.admin)
              return h('span', null, text)
            }
          },
          {
            title: '登录时间',
            key: 'logged',
            width: 110,
            render (h, params) {
              return h('span', null, time.getDate(params.row.logged))
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 200,
            render: (h, params) => {
              // let btnRole = h('Button', {
              //   props: {
              //     type: 'success',
              //     size: 'small'
              //   },
              //   style: {
              //     marginRight: '8px'
              //   },
              //   on: {
              //     click: () => {
              //       this.handleEditRole(params.row)
              //     }
              //   }
              // }, '角色')
              let btnEdit = h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => {
                    this.handleEdit(params.row)
                  }
                }
              }, '编辑')
              let btnDel = h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.handleDel(params.row)
                  }
                }
              }, '删除')
              return h('div', [
                btnEdit,
                btnDel
              ])
            }
          }
        ]
      }
    },
    computed: {
      ...mapState(['users'])
    },
    created () {
      this.get()
    },
    methods: {
      get (current = 1) {
        this.$set(this, 'current', current)

        this.$store.dispatch('getUsers', {
          offset: (current - 1) * Config.PAGE_SIZE,
          limit: Config.PAGE_SIZE,
          ...this.search
        })
      },
      handlePageChange (current) {
        this.get(current)
      },
      handleSearch () {
        this.get()
        this.$set(this, 'current', 1)
      },
      handleEdit (user) {
        let id = user.username
        this.$router.push(`/users/form/${id}`)
      },
      handleEditRole (user) {
        let id = user.username
        this.$router.push(`/users/userrole/${id}`)
      },
      handleEnable (user) {
        user.enabled = !user.enabled
        this.$store.dispatch('enableUser', user).then(() => {
          this.get()
        })
      },
      handleDel (user) {
        this.del.modal = true
        this.del.id = user.username
      },
      handleDelOk () {
        this.$store.dispatch('deleteUser', {username: this.del.id}).then(() => {
          this.$Message.success('删除成功！')
          this.get()
        })
      }
    }
  }
</script>
